<template>
    <div class="book">
        <div class="top">豆瓣书单<span>全部 454 ></span></div>
        <div class="list">
            <div class="item">
                <img src="https://img1.doubanio.com/view/note/sqs/public/p50830917.jpg" alt="">
                <span class="title">纸女孩</span>
                <p>101本 7181关注</p>
                <p><span class="author">比从前更好</span> 创建</p>
            </div>
            <div class="item">
                <img src="https://img3.doubanio.com/view/photo/sqs/public/p2195166065.jpg" alt="">
                <span class="title">爱彼</span>
                <p>101本 7181关注</p>
                <p><span class="author">比从前更好</span> 创建</p>
            </div>
            <div class="item">
                <img src="https://img1.doubanio.com/view/note/sqs/public/p50830917.jpg" alt="">
                <span class="title">希望</span>
                <p>10本 7181关注</p>
                <p><span class="author">比从前更好</span> 创建</p>
            </div>
            <div class="item">
                <img src="https://img1.doubanio.com/view/note/sqs/public/p50830917.jpg" alt="">
                <span class="title">左手拐杖</span>
                <p>18本 781关注</p>
                <p><span class="author">比从前更好</span> 创建</p>
            </div>
            <div class="item">
                <img src="https://img1.doubanio.com/view/note/sqs/public/p50830917.jpg" alt="">
                <span class="title">她不值得</span>
                <p>60本 71821关注</p>
                <p><span class="author">比从前更好</span> 创建</p>
            </div>
            <div class="item">
                <img src="https://img1.doubanio.com/view/note/sqs/public/p50830917.jpg" alt="">
                <span class="title">回头是岸</span>
                <p>19本 611关注</p>
                <p><span class="author">比从前更好</span> 创建</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.book{
    .top{
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 10px;
        font-weight: 600;
        color: #000;
        span{
            float: right;
            font-size: 13px;
            color: #666;
        }
    }
    .list{
        .item{
            border-bottom: 2px solid #ccc;
            margin: 8px;
            padding-bottom: 8px;
            img{
                float: left;
                width: 60px;
            }
            .title{
                display: inline-block;
                height: 25px;
                width: 80px;
                line-height: 25px;
                text-align: center;
                font-weight: 600;
            }
            p{
                height: 18px;
                line-height: 20px;
                font-size: 13px;
                color: #ccc;
                margin-left: 22%;
                span{
                    color: #666;
                }
            }
        }
    }
}
</style>